<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="form2">
        <el-form-item label="车辆类型">
          <el-select v-model="form2.truckTypeId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码">
          <el-input
            placeholder="车牌号码"
            v-model="form2.licensePlate"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="sousuo">搜索</el-button>
          <el-button @click="chongzhi">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="chang">
      <button @click="quanbu">全部</button>
      <button @click="keyong">可用</button>
      <button @click="tingyong">停用</button>
    </div>
    <div class="content">
      <el-button type="danger" @click="add">新增车辆</el-button>
      <el-table
        highlight-current-row
        style="width: 100%; font-size: 13px"
        :data="form"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column property="licensePlate" label="车牌号码">
        </el-table-column>
        <el-table-column property="truckTypeName" label="车辆类型">
        </el-table-column>
        <el-table-column property="driverNum" label="司机数量">
        </el-table-column>
        <el-table-column property="workStatus" label="车辆状态">
        </el-table-column>
        <el-table-column property="deviceGpsId" label="GPS设备ID">
        </el-table-column>
        <el-table-column property="allowableLoad" label="实体重量">
        </el-table-column>
        <el-table-column property="allowableVolume" label="实载体积">
        </el-table-column>
        <el-table-column property="address" label="操作" width="160">
          <template #default="{}">
            <el-link type="primary" style="font-size: 12px">查看详情</el-link>
            <el-link style="margin: 0 5px; font-size: 12px">启用</el-link>
            <el-link type="danger" style="font-size: 12px">配置司机</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-dialog
        title="新增车辆"
        :visible.sync="dialogVisible"
        width="40%"
        @close="close"
      >
        <el-form label-width="80px" :model="form1">
          <el-form-item label="车辆类型">
            <el-select v-model="form1.truckTypeId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号码">
            <el-input
              placeholder="车牌号码"
              v-model="form1.licensePlate"
            ></el-input>
          </el-form-item>
          <el-form-item label="GPS设备">
            <el-input placeholder="gps" v-model="form1.deviceGpsId"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="btnOk">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getliebiaoApi,
  getxialaApi,
  getsousuoApi,
  getquanbuApi,
  getkeyongApi,
  gettingyongApi,
  getaddApi,
} from "@/api/vehicle";
export default {
  data() {
    return {
      value: "",
      dialogVisible: false,
      page: {
        page: 1,
        pageSize: 10,
      },
      form: [],
      form2: {
        truckTypeId: "",
        deviceGpsId: "",
        licensePlate: "",
      },
      form1: {
        truckTypeId: "",
        deviceGpsId: "",
        licensePlate: "",
      },
      options: [],
      total: 0,
    };
  },
  created() {
    this.vehicle();
    this.getxia();
    this.keyong();
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.keyong();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.keyong();
    },
    async vehicle() {
      const res = await getliebiaoApi(this.page);
      // console.log(res);
      this.form = res.data.items;
    },
    async getxia() {
      const res1 = await getxialaApi();
      console.log(res1);
      this.options = res1.data;
    },
    async sousuo() {
      const res = await getsousuoApi({ ...this.page, ...this.form2 });
      console.log(res);
      this.form = res.data.items;
    },
    async chongzhi() {
      this.form2 = "";
      this.keyong();
    },
    async quanbu() {
      const res = await getquanbuApi(this.page);
      console.log(res);
    },
    async keyong() {
      const res = await getkeyongApi({ ...this.page, workStatus: 1 });
      console.log(res);
      this.form = res.data.items;
      this.total = +res.data.counts;
    },
    async tingyong() {
      const res = await gettingyongApi({ ...this.page, workStatus: 0 });
      console.log(res);
    },
    add() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
      this.form1 = {};
    },
    async btnOk() {
      const res = await getaddApi(this.form1);
      // console.log(res);
      this.$message.success("添加成功");
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.form {
  width: 100%;
  height: 80px;
  background-color: #fff;
  padding: 20px;
}
.chang {
  width: 100%;
  height: 48px;
  background-color: #fff;
  margin: 20px 0;
  button {
    width: 120px;
    height: 48px;
    background-color: #fff;
  }
  .active {
    background-color: #ffeeeb;
    color: #e15536;
  }
}
.content {
  background: #fff;
  height: 750px;
  padding: 28px;
}
</style>